<template>
  <div class="Home Home2">
    <div class="auto auto_1200">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <dt>
              <el-input
                prefix-icon="el-icon-search"
                placeholder="关键字、姓名、特征"
                v-model="user.RealName"
              ></el-input>
            </dt></div>
            </el-col>
        <el-col :span="2"
          ><div class="grid-content bg-purple">
            <dd class="select_box select_box1">
              <el-select v-model="user.Sex" placeholder="性别">
                <el-option
                  v-for="item in user.options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </dd></div
        ></el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <dd class="select_box select_box2">
              <el-input
                v-model="user.NativePlace"
                placeholder="籍贯 如：北京"
                class="seekfamily"
              ></el-input>
            </dd></div>
        </el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <dd class="select_box select_box2">
              <el-input
                v-model="user.Address"
                placeholder="失踪地点 如：北京"
                class="seekfamily"
              ></el-input>
            </dd></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple">
            <dd class="select_box select_box2">
              <div class="date">
                <el-date-picker
                  v-model="user.LostTime"
                  placeholder="选择失踪日期 如：1990"
                >
                </el-date-picker>
              </div>
            </dd></div
        ></el-col>
        <el-col :span="3"
          ><div class="grid-content bg-purple">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="btn"
              @click="goSeekFamily"
              >搜索</el-button
            >
          </div></el-col>
      </el-row>
      <div class="Htitle">
        <h2>紧急寻亲</h2>
        <p><i></i><b>Emergency tracing</b><i></i></p>
        <span>您的转发与关注，就是他们回家的路</span>
      </div>
    </div>
    <button @click="test">test</button>
  </div>
</template>

<script>
export default {
  name: "Emergency",

  data() {
    return {
      keyword: "",
      user: {
        RealName: "",
        Sex: "",
        options1: [
          {
            value: "选项1",
            label: "男",
          },
          {
            value: "选项2",
            label: "女",
          },
        ],
        LostTime: "",
        NativePlace:"",
        Address: "",
        Telephone: "",
        ClassName: "",
        options2: [
          {
            value: "选项1",
            label: "家寻亲人",
          },
          {
            value: "选项2",
            label: "亲人寻家",
          },
          {
            value: "选项3",
            label: "救助专栏",
          },
          {
            value: "选项4",
            label: "公安协助专栏",
          },
          {
            value: "选项5",
            label: "海外寻亲",
          },
        ],
        Height: "",
        Site: "",
        Extra: "",
      },
    };
  },

  mounted() {},

  methods: {
    goSeekFamily() {
      this.$router.push({
        name: "SeekFamily",
        params: { keyword: this.user.RealName },
        query: { k: this.keyword.toUpperCase() },
      });
    },
    test() {
      this.$router.push({
        name: "Board",
      });
    },
  },
};
</script>

<style lang="less" scoped>
/*紧急寻亲公示*/

.Home2 {
  background: url(./images/Home2_bg.png);
  padding: 50px 0 60px;
  border-bottom: 1px solid #f0f0f0;
}
.Home2 .search {
  padding-left: 40px;
  padding-bottom: 20px;
}
.Home2 .search dt,
.Home2 .search dd {
  float: left;
  position: relative;
  margin-right: 7px;
}
.Home2 .search dt {
  width: 453px;
  height: 40px;
  padding-left: 44px;
  color: #bbbbbb;
  font-size: 16px;
  line-height: 40px;
}
.Home2 .search dd.select_box {
  height: 40px;
  // border: 1px solid #d4d4d4;
  font-size: 16px;
  color: #3f3f3f;
  background: #fff;
  position: relative;
}

.Home2 .search dd.select_box1 {
  width: 100px;
}
.Home2 .search dd.select_box2 {
  width: 250px;
}
.Home2 .search dd.select_box3 {
  width: 113px;
}
.Home2 .search dd.select_box4 {
  width: 123px;
}
.Home2 .search dd.select_box5 {
  width: 142px;
}

.Home2 .select_box span {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #3f3f3f;
  font-size: 16px;
  background: url(./images/Home2_icon1.png) no-repeat 90% center #fff;
  padding: 0 30px 0 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Home2 .select_box select {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 100%;
  cursor: pointer;
}

.Home2 .search dd.select_box1 span {
  width: 46px;
}
.Home2 .search dd.select_box2 span {
  width: 60px;
}
.Home2 .search dd.select_box3 span {
  width: 73px;
}
.Home2 .search dd.select_box4 span {
  width: 83px;
  width: 73px\0;
  background-position: right center\0;
}
.Home2 .search dd.select_box5 span {
  width: 102px;
}
.Home2 .search dd.select_box label {
  position: absolute;
  left: 10px;
  top: 0;
  height: 40px;
  z-index: 1;
}

.Home2 .search dd ul {
  position: absolute;
  left: 0;
  top: 40px;
  border: 1px solid #d4d4d4;
  overflow: hidden;
  background: #fff;
  display: none;
  width: 100%;
}
.Home2 .search dd.select_box4 ul {
  width: 300px;
}
.Home2 .search dd ul li {
  display: block;
  line-height: 26px;
  cursor: pointer;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
}
.Home .Htitle {
  text-align: center;
  padding: 50px 0;
}
.Home .Htitle h2 {
  margin: 0;
  color: #333;
  font-size: 30px;
  font-weight: normal;
}
.Home .Htitle p {
  margin: 0;
}
.Home .Htitle i {
  display: inline-block;
  vertical-align: middle;
  height: 1px;
  width: 193px;
  background: #e1e1e1;
}
.Home .Htitle p b {
  display: inline-block;
  font-family: Arial;
  color: #cccccc;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: normal;
  margin: 10px 25px;
}
.Home .Htitle span {
  display: block;
  color: #666;
  font-size: 16px;
}
</style>